<script setup>

import {getCurrentInstance, onBeforeMount, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {get, jsonPost, post} from "@/net";
import router from "@/router";

const form = reactive({
    name: '',
    info: '',
    start_time: '',
    end_time: '',
    gid: 0,
    singers: []
})

const tableData = ref([])
const transferData = ref([])
const { proxy } = getCurrentInstance();

onBeforeMount(() => {
    getGame()
    getSingerList()
})

const getGame = () => {
    post('/api/game/gid', {
                gid: proxy.$route.query.gid
            }, (data) => {
                form.name = data.name
                form.info = data.info
                form.start_time = data.start_time
                form.end_time = data.end_time
                console.log(form)
            }
    )
}

const getSingerList = () => {
    get('/api/singer/all',
            (data) => {
                tableData.value.push(data)
                console.log(tableData.value)
                transferData.value = generateData()
                console.log(transferData)
            }
    )
}

const generateData = () => {
    const data = []
    for (let i = 0; i < tableData.value[0].length; i++) {
        data.push({
            key: tableData.value[0][i].sid,
            label: tableData.value[0][i].name
        })
    }
    console.log(data)
    return data;
}

const addGameTwo = () => {
    console.log(form.singers)
    jsonPost('api/game/add-step-two?gid='+ proxy.$route.query.gid,
        form.singers
    , (message) => {
        ElMessage.success(message)
        router.push('/index/game')
    }, (message) => {
        ElMessage.warning(message)
    })
}
</script>

<template>
    <div style="margin: 20px;">
        <el-form
                ref="formRef"
                :model="form"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
                disabled="disabled"
        >
            <el-form-item label="比赛名称" prop="name">
                <el-input v-model="form.name" style="width: 100px;"/>
            </el-form-item>
            <el-form-item label="比赛简介" prop="info">
                <el-input v-model="form.info"
                          type="textarea"
                          style="width: 700px;"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          maxlength="1000"
                          show-word-limit
                />
            </el-form-item>
            <el-form-item label="比赛时间" prop="start_time">
                <div class="demo-time-range">
                    <el-time-select
                            v-model="form.start_time"
                            class="mr-4"
                            placeholder="开始时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                    />
                    <el-time-select
                            v-model="form.end_time"
                            placeholder="结束时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                    />
                </div>
            </el-form-item>
        </el-form>
        <el-form
                ref="formRef"
                :model="form"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
        >
            <el-form-item label="参赛选手" prop="singers">
                <el-transfer v-model="form.singers" :data="transferData" :titles="['歌手列表', '参赛歌手']"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addGameTwo">
                    提交
                </el-button>
                <el-button type="warning" @click="router.push('/index/game')">
                    返回
                </el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<style scoped>

</style>